<template>
  <div class="">
    <Headers :graphic="graphic" />
    <div class="nav">
      <div class="nav-item red-item item-bdright">学科简介</div>
      <div class="nav-item item-bdright">学科资源</div>
      <div class="nav-item">学术精英榜</div>
    </div>
    <div class="banner">
      <div class="tit">博士学位授权学科（20）</div>
      <div class="card">
        <div class="card-item" v-for="item in 17" :key="item">
          兵器科学与技术
        </div>
      </div>
      <div class="tit">硕士学位授权学科(21)</div>
      <div class="card">
        <div class="card-item" v-for="item in 17" :key="item">
          兵器科学与技术
        </div>
      </div>
      <div class="tit">专业学位（2）</div>
      <div class="card">
        <div class="card-item" v-for="item in 2" :key="item">
          兵器科学与技术
        </div>
      </div>
    </div>
    <Bottom />
    <Topnav />
  </div>
</template>

<script>
import Topnav from '@/components/topnav.vue'
import Bottom from '@/components/bottom.vue'
import Headers from '@/components/headers.vue'

export default {
  name: '',
  data() {
    return {
      graphic: {
        title: '学科建设',
        imgherf: '@/assets/imgs/background2.png',
        text: '新的军事科学院学科布局从原有的军事学扩展到理、工、农、医、管、军等多个门类，形成了理论与技术相互融合支撑的全新发展格局。',
      },
    }
  },
  components: {
    Topnav,
    Bottom,
    Headers,
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  padding: 95px 330px 20px;
  .item-bdright {
    border-right: 2px solid #666666;
  }
  .red-item {
    color: #b21315;
  }
  .nav-item {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 26px;
  }
}
.banner {
  padding: 0 170px 200px;
  .tit {
    font-weight: 700;
    color: #666666;
    font-size: 32px;
    margin-bottom: 35px;
    margin-top: 50px;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    .card-item {
      width: 32%;
      height: 80px;
      font-weight: 500;
      color: #666666;
      font-size: 24px;
      text-align: center;
      line-height: 80px;
      background-color: #e4e4e4;
      margin-bottom: 15px;
      margin-right: 15px;
    }
  }
}
</style>
